﻿var my_skins = ["skin-blue", "skin-black", "skin-red", "skin-yellow", "skin-purple", "skin-green"];
$(function () {
    /* For demo purposes */
    var demo = $("<div />").css({
        position: "fixed",
        bottom: "20px",
        "margin-right": "10px",
        right: "0",
        background: "#fff",
        padding: "10px 15px",
        "font-size": "13px",
        "z-index": "99999",
        cursor: "pointer",
        color: "#3c8dbc"
    }).html("<i class='fa fa-gear'></i>").addClass("no-print btn-skins");

    var demo_settings = $("<div />").css({
        position: "fixed",
        bottom: "10px",
        right: "-36%",
        background: "#fff",
        border: "0 solid #ddd",
        "width": "36%",
        "z-index": "99999"
    }).addClass("no-print");
    //Fixed layout
    //"<div class='box-tools pull-right'>"
    //    + "<div class='checkbox'>"
    //    + "<label>"
    //    + "<input type='checkbox' onchange='change_layout(\"fixed\");'/><span style='position: relative; top: 1px;'>Cố định thanh công cụ</span>"
    //    + "</label>"
    //    + "</div>"
    //    + "</div>"
    //Boxed layout
    //+ "<div class='form-group'>"
    //+ "<div class='checkbox'>"
    //+ "<label>"
    //+ "<input type='checkbox' onchange='change_layout(\"layout-boxed\");'/> "
    //+ "Boxed Layout"
    //+ "</label>"
    //+ "</div>"
    //+ "</div>"
    //Sidebar Collapse
    //+ "<div class='form-group'>"
    //+ "<div class='checkbox'>"
    //+ "<label>"
    //+ "<input type='checkbox' onchange='change_layout(\"sidebar-collapse\");'/> "
    //+ "Collapsed Sidebar"
    //+ "</label>"
    //+ "</div>"
    //+ "</div>"
    //;
    var skins_list = "<div class=\"row text-center\"><div class=\"col-xs-12 col-sm-12 col-md-12\"><div class=\"btn-group btn-group-lg\">";
    var skin_blue = "<button type=\"button\" class=\"btn btn-flat bg-blue\" onclick=\"change_skin('skin-blue')\">Màu Blue</button>";
    skins_list += skin_blue;
    //var skin_black =
    //    $("<li />", { style: "float: left; width: 20%; padding: 5px; border-bottom: 1px solid rgb(221, 221, 221);" })
    //        .append("<a href='javascript:void(0)' onclick='change_skin(\"skin-black\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
    //            + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 10px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 10px; background: #fefefe;'></span></div>"
    //            + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
    //            + "<p class='text-center'>Màu Black</p>"
    //            + "</a>");
    //skins_list.append(skin_black);
    var skin_purple = "<button type=\"button\" class=\"btn btn-flat bg-purple\" onclick=\"change_skin('skin-purple')\">Màu Purple</button>";
    skins_list += skin_purple;
    var skin_green = "<button type=\"button\" class=\"btn btn-flat bg-green\" onclick=\"change_skin('skin-green')\">Màu Green</button>";
    skins_list += skin_green;
    var skin_red = "<button type=\"button\" class=\"btn btn-flat bg-red\" onclick=\"change_skin('skin-red')\">Màu Red</button>";
    skins_list += skin_red;
    var skin_yellow = "<button type=\"button\" class=\"btn btn-flat bg-yellow\" onclick=\"change_skin('skin-yellow')\">Màu Yellow</button>";
    skins_list += skin_yellow;
    skins_list += "</div></div></div>";

    //demo_settings.append("<h4 class='text-light-blue' style='margin: 5px; border-bottom: 1px solid #ddd; padding-bottom: 5px;'>Màu sắc</h4>");

    demo_settings.append("<div class='box' style='margin-bottom: 0; box-shadow: 0;'>"
        + "<div class='box-body'>"
        + skins_list
        + "</div>"
        + "</div>");


    demo.click(function () {
        if (!$(this).hasClass("open")) {
            $(this).animate({ "right": "36%" });
            demo_settings.animate({ "right": "10px" });
            $(this).addClass("open");
        } else {
            $(this).animate({ "right": "0" });
            demo_settings.animate({ "right": "-36%" });
            $(this).removeClass("open");
        }
    });

    $("body").append(demo);
    $("body").append(demo_settings);

    setup();
});

function change_layout(cls) {
    $("body").toggleClass(cls);
    $.AdminLTE.layout.fixSidebar();
}

function change_skin(cls) {
    $.each(my_skins, function (i) {
        $("body").removeClass(my_skins[i]);
        $(".no-print.btn-skins").removeClass(my_skins[i]);
        $(".box").removeClass(my_skins[i]);
        $(".dropdown-toggle").removeClass(my_skins[i]);
    });
    $("body").addClass(cls);
    $(".no-print.btn-skins").addClass(cls);
    $(".box").addClass(cls);
    $(".dropdown-toggle").addClass(cls);
    store("skin", cls);
    return false;
}

function store(name, val) {
    if (typeof (Storage) !== "undefined") {
        localStorage.setItem(name, val);
    } else {
        alert("Please use a modern browser to properly view this template!");
    }
}

function get(name) {
    if (typeof (Storage) !== "undefined") {
        return localStorage.getItem(name);
    } else {
        alert("Please use a modern browser to properly view this template!");
    }
}

function setup() {
    var tmp = get("skin");
    if (tmp && $.inArray(tmp, my_skins) >= 0) {
        change_skin(tmp);
    }
}